<template>
  <div class="header-top">
    <div class="header-top__logo-wrapper">
      <router-link tag="div" class="header-top__logo pointer" :to="{name: 'home'}"></router-link>
    </div>
    <div class="header-top-nav" v-if="isLogin">
      <router-link :to="{name: 'home'}" class="header-top-nav__tab">
        首页
      </router-link>
      <router-link :to="{name: 'extension-center'}" class="header-top-nav__tab">
        推广数据
      </router-link>
      <router-link :to="{name: 'lower-level-center'}" class="header-top-nav__tab">
        下级列表
      </router-link>
      <router-link :to="{name: 'report-center'}" class="header-top-nav__tab">
        报表中心
      </router-link>
      <router-link :to="{name: 'withdraw-center'}" class="header-top-nav__tab">
        财务管理
      </router-link>
    </div>

    <div class="header-top-nav" v-else>
      <router-link :to="{path: '/about-us/about-us'}" class="header-top-nav__tab">
        关于我们
      </router-link>
      <!--<router-link :to="{path: '/about-us/statement'}" class="header-top-nav__tab">-->
        <!--合作协议-->
      <!--</router-link>-->
      <router-link :to="{path: '/about-us/commission'}" class="header-top-nav__tab">
        佣金方案
      </router-link>
      <!--<router-link :to="{path: '/about-us/question'}" class="header-top-nav__tab">-->
        <!--常见问题-->
      <!--</router-link>-->
    </div>

    <div class="header-top__buttons" v-if="isLogin">
      <div class="header-top__button">
        <customer-service>
          <svg-icon class="header-top__button--service" icon-class="customer-service"></svg-icon>
        </customer-service>
      </div>
      <div class="header-top__button header-top__button--mobile">
        <svg-icon icon-class="mobile"></svg-icon>
        <!-- <transition name="el-fade-in-linear"> -->
        <div class="header-top__menu">
          <p class="header-top__qrcode_detaile">
            代理后台APP下载
          </p>
          <div class="header-top__qrcode_box">
            <qriously :value='downloadUrl' :size="102"></qriously>
          </div>
        </div>
        <!-- </transition> -->

      </div>

      <router-link class="header-top__button header-top__button--notice" :to="{name: 'user-notice'}">
        <svg-icon icon-class="notification"></svg-icon>
        <el-badge class="header-top__notice-count" type="danger" :value="newNoticeCount" :hidden="!newNoticeCount" :max="99"></el-badge>
      </router-link>

      <profile-dropdown class="header-top__button header-top__dropmenu-wrapper">
        <div class="header-top__dropmenu">
          <svg-icon icon-class="user"></svg-icon>
          {{user.username}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </profile-dropdown>
    </div>
  </div>
</template>

<script>
  import ProfileDropdown from "@/views/app-header/profile-dropdown";

  export default {
  name: "header-top",

  components: {
    ProfileDropdown
  },

  data() {
    return {
      downloadUrl: _.proxyDownloadUrl(),
      activeIndex: "0",
      modalLogin: false,
      modalRegister: false,
      modalForgot: false,
      userSiderShow: false,
      noticeShow: false,
      paymentShow: false,
      isQrcodeShow: false
    };
  },
  methods: {
    togglePaymentModal(key, flag) {
      this.$store.commit(types.CHANGE_ACTIVE_TAB, key);
      this.$store.commit(types.TOGGLE_CTRL, flag);
    }
  },

  computed: {
    ...mapState({
      newNoticeCount: state => state.announcement.newNoticeCount,
      user: state => state.user
    }),
    ...mapGetters([
      'isLogin'
    ])
  }
};
</script>

<style lang="scss" scoped>
@include b(header-top) {
  height: 100%;
  display: flex;
  background-color: $--app-header-top-color;
  width: $--app-secondary-width;
  margin: 0 auto;
  align-items: center;

  @include e(logo-wrapper) {
    margin-right: 80px;
  }
  @include e(menu) {
    width: 194px;
    height: 185px;
    top: 90px;
    left: -80px;
    position: absolute;
    border-radius: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: all 0.3s ease-out;
    z-index: 10;
    display: none;
    &:before {
      position: absolute;
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-width: 0 10px 20px;
      border-style: solid;
      position: absolute;
      border-color: transparent transparent rgba(0, 0, 0, 0.7); /*透明 透明  灰*/
      top: -20px;
      left: 50%;
      margin-left: -5px;
      overflow: hidden;
    }
  }
  @include e(qrcode_box) {
    width: 1.02rem;
    padding: 0.05rem;
    border-radius: 6px;
    background: #fff;
    margin: 0 auto;
    /deep/ canvas {
      width: 102px;
      height: 102px;
    }
  }
  @include e(qrcode_detaile) {
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 14px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  @include e(logo) {
    @include utils-bg(url(~assets/logo-white.png) no-repeat, contain);
    width: 215px;
    height: 33px;
    stroke: #eceded;
  }
  @include e(link-group) {
    a {
      font-size: $--font-size-small;
      color: $--color-text-link;
    }

    margin-right: 133px;
  }

  @include e(buttons) {
    display: flex;
    align-items: center;
    color: $--color-white;
    height: 100%;
  }

  @include e(button) {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    min-width: 70px;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;

    @include m(service) {
      width: 28px;
      height: 28px;
    }

    @include m(mobile) {
      .svg-icon {
        width: 17px;
        height: 29px;
      }
      &:hover {
        @include e(menu) {
          opacity: 1;
          display: block;
        }
      }
    }
    @include m(notice) {
      position: relative;
      .svg-icon {
        width: 21px;
        height: 26px;
      }

      @include e(notice-count) {
        position: absolute;
        top: 16px;
        right: 16px;
      }
    }

    &.router-link-active {
      background-color: $--color-primary;
    }
  }

  @include e(personal) {
    display: flex;
    align-items: center;
  }

  @include e(dropmenu-wrapper) {
    .svg-icon {
      width: 19px;
      height: 23px;
      margin-right: 10px;
    }
  }

  @include e(dropmenu) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: $--color-white;
    cursor: pointer;
    &:last-of-type {
      margin-right: 0;
    }
  }
}

@include b(header-top-nav) {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  height: 100%;
  @include e(tab) {
    font-size: $--font-size-large;
    font-weight: bold;
    padding: 0 22px;
    height: 100%;
    display: flex;
    align-items: center;
    color: $--color-white;
    @include utils-transition-normal();

    &.router-link-active {
      background-color: $--color-primary;
    }
  }
}
</style>
